<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>区块链资产追踪系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        dark: '#1D2129',
                        'dark-2': '#4E5969',
                        'light-1': '#F2F3F5',
                        'light-2': '#E5E6EB',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
            .btn-effect {
                position: relative;
                overflow: hidden;
            }
            .btn-effect:after {
                content: "";
                background: rgba(255, 255, 255, 0.3);
                position: absolute;
                top: 50%;
                left: 50%;
                width: 5px;
                height: 5px;
                border-radius: 100%;
                transform: scale(1, 1) translate(-50%);
                transform-origin: 50% 50%;
            }
            .btn-effect:focus:not(:active)::after {
                animation: ripple 1s ease-out;
            }
            @keyframes ripple {
                0% {
                    transform: scale(0, 0);
                    opacity: 0.5;
                }
                100% {
                    transform: scale(20, 20);
                    opacity: 0;
                }
            }
            .fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
        }
    </style>
</head>
<body class="font-inter bg-light-1 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-md sticky top-0 z-50 transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-link text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-dark">区块链资产追踪系统</h1>
            </div>
            <nav class="hidden md:flex space-x-8">
                <a href="#create" class="text-dark-2 hover:text-primary transition-colors duration-300">资产上链</a>
                <a href="#query" class="text-dark-2 hover:text-primary transition-colors duration-300">资产查询</a>
                <a href="#transfer" class="text-dark-2 hover:text-primary transition-colors duration-300">资产转移</a>
            </nav>
            <button class="md:hidden text-dark text-xl" id="menu-toggle">
                <i class="fa fa-bars"></i>
            </button>
        </div>
        <!-- 移动端菜单 -->
        <div class="md:hidden hidden bg-white w-full border-t border-light-2" id="mobile-menu">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="#create" class="text-dark-2 hover:text-primary py-2 transition-colors duration-300">资产上链</a>
                <a href="#query" class="text-dark-2 hover:text-primary py-2 transition-colors duration-300">资产查询</a>
                <a href="#transfer" class="text-dark-2 hover:text-primary py-2 transition-colors duration-300">资产转移</a>
            </div>
        </div>
    </header>

    <main class="flex-grow container mx-auto px-4 py-8">
        <!-- 状态卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
            <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-dark-2 text-sm">总上链资产</p>
                        <h3 class="text-2xl font-bold text-dark mt-1" id="total-assets">0</h3>
                    </div>
                    <div class="bg-primary/10 p-3 rounded-lg">
                        <i class="fa fa-database text-primary text-xl"></i>
                    </div>
                </div>
                <div class="mt-4 flex items-center text-sm">
                    <span class="text-success flex items-center"><i class="fa fa-arrow-up mr-1"></i> 12.5%</span>
                    <span class="text-dark-2 ml-2">相比上月</span>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-dark-2 text-sm">本月转移</p>
                        <h3 class="text-2xl font-bold text-dark mt-1" id="monthly-transfers">0</h3>
                    </div>
                    <div class="bg-secondary/10 p-3 rounded-lg">
                        <i class="fa fa-exchange text-secondary text-xl"></i>
                    </div>
                </div>
                <div class="mt-4 flex items-center text-sm">
                    <span class="text-danger flex items-center"><i class="fa fa-arrow-down mr-1"></i> 3.2%</span>
                    <span class="text-dark-2 ml-2">相比上月</span>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-dark-2 text-sm">活跃所有者</p>
                        <h3 class="text-2xl font-bold text-dark mt-1" id="active-owners">0</h3>
                    </div>
                    <div class="bg-warning/10 p-3 rounded-lg">
                        <i class="fa fa-users text-warning text-xl"></i>
                    </div>
                </div>
                <div class="mt-4 flex items-center text-sm">
                    <span class="text-success flex items-center"><i class="fa fa-arrow-up mr-1"></i> 8.7%</span>
                    <span class="text-dark-2 ml-2">相比上月</span>
                </div>
            </div>
        </div>

        <!-- 操作区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 资产上链 -->
            <section id="create" class="bg-white rounded-xl shadow-md p-6 col-span-1">
                <div class="flex items-center mb-6">
                    <div class="bg-primary/10 p-3 rounded-lg mr-4">
                        <i class="fa fa-plus-circle text-primary text-xl"></i>
                    </div>
                    <h2 class="text-xl font-bold text-dark">资产上链</h2>
                </div>
                <form id="create-form" class="space-y-4">
                    <div>
                        <label for="create-id" class="block text-dark-2 text-sm font-medium mb-1">资产ID</label>
                        <input type="text" id="create-id" name="id" class="w-full px-4 py-2 border border-light-2 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" placeholder="请输入资产ID" required>
                    </div>
                    <div>
                        <label for="create-owner" class="block text-dark-2 text-sm font-medium mb-1">所有者</label>
                        <input type="text" id="create-owner" name="owner" class="w-full px-4 py-2 border border-light-2 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" placeholder="请输入所有者" required>
                    </div>
                    <div>
                        <label for="create-name" class="block text-dark-2 text-sm font-medium mb-1">资产名称</label>
                        <input type="text" id="create-name" name="name" class="w-full px-4 py-2 border border-light-2 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" placeholder="请输入资产名称" required>
                    </div>
                    <div>
                        <label for="create-info" class="block text-dark-2 text-sm font-medium mb-1">资产信息</label>
                        <textarea id="create-info" name="info" rows="3" class="w-full px-4 py-2 border border-light-2 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" placeholder="请输入资产详细信息" required></textarea>
                    </div>
                    <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-300 btn-effect flex items-center justify-center">
                        <i class="fa fa-chain mr-2"></i> 提交上链
                    </button>
                </form>
                <div id="create-result" class="mt-4 hidden">
                    <div class="p-4 rounded-lg border" id="create-result-content">
                        <!-- 结果将在这里显示 -->
                    </div>
                </div>
            </section>

            <!-- 资产查询 -->
            <section id="query" class="bg-white rounded-xl shadow-md p-6 col-span-1">
                <div class="flex items-center mb-6">
                    <div class="bg-secondary/10 p-3 rounded-lg mr-4">
                        <i class="fa fa-search text-secondary text-xl"></i>
                    </div>
                    <h2 class="text-xl font-bold text-dark">资产查询</h2>
                </div>
                <form id="query-form" class="space-y-4">
                    <div>
                        <label for="query-id" class="block text-dark-2 text-sm font-medium mb-1">资产ID</label>
                        <input type="text" id="query-id" name="id" class="w-full px-4 py-2 border border-light-2 rounded-lg focus:ring-2 focus:ring-secondary/50 focus:border-secondary outline-none transition-all" placeholder="请输入要查询的资产ID" required>
                    </div>
                    <button type="submit" class="w-full bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-300 btn-effect flex items-center justify-center">
                        <i class="fa fa-search mr-2"></i> 查询资产
                    </button>
                </form>
                <div id="query-result" class="mt-4 hidden">
                    <div class="p-4 rounded-lg border" id="query-result-content">
                        <!-- 结果将在这里显示 -->
                    </div>
                </div>
            </section>

            <!-- 资产转移 -->
            <section id="transfer" class="bg-white rounded-xl shadow-md p-6 col-span-1">
                <div class="flex items-center mb-6">
                    <div class="bg-warning/10 p-3 rounded-lg mr-4">
                        <i class="fa fa-exchange text-warning text-xl"></i>
                    </div>
                    <h2 class="text-xl font-bold text-dark">资产转移</h2>
                </div>
                <form id="transfer-form" class="space-y-4">
                    <div>
                        <label for="transfer-id" class="block text-dark-2 text-sm font-medium mb-1">资产ID</label>
                        <input type="text" id="transfer-id" name="id" class="w-full px-4 py-2 border border-light-2 rounded-lg focus:ring-2 focus:ring-warning/50 focus:border-warning outline-none transition-all" placeholder="请输入要转移的资产ID" required>
                    </div>
                    <div>
                        <label for="transfer-owner" class="block text-dark-2 text-sm font-medium mb-1">新所有者</label>
                        <input type="text" id="transfer-owner" name="owner" class="w-full px-4 py-2 border border-light-2 rounded-lg focus:ring-2 focus:ring-warning/50 focus:border-warning outline-none transition-all" placeholder="请输入新所有者" required>
                    </div>
                    <button type="submit" class="w-full bg-warning hover:bg-warning/90 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-300 btn-effect flex items-center justify-center">
                        <i class="fa fa-exchange mr-2"></i> 转移资产
                    </button>
                </form>
                <div id="transfer-result" class="mt-4 hidden">
                    <div class="p-4 rounded-lg border" id="transfer-result-content">
                        <!-- 结果将在这里显示 -->
                    </div>
                </div>
            </section>
        </div>

        <!-- 资产列表 -->
        <section class="mt-10 bg-white rounded-xl shadow-md p-6">
            <div class="flex justify-between items-center mb-6">
                <div class="flex items-center">
                    <div class="bg-dark/10 p-3 rounded-lg mr-4">
                        <i class="fa fa-list text-dark text-xl"></i>
                    </div>
                    <h2 class="text-xl font-bold text-dark">资产列表</h2>
                </div>
                <div class="flex space-x-2">
                    <div class="relative">
                        <input type="text" id="search-asset" placeholder="搜索资产..." class="pl-9 pr-4 py-2 border border-light-2 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-dark-2"></i>
                    </div>
                    <button id="refresh-assets" class="bg-primary/10 hover:bg-primary/20 text-primary p-2 rounded-lg transition-colors duration-300" onclick="refreshAssets()">
                        <i class="fa fa-refresh"></i> 刷新
                    </button>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-light-2">
                    <thead>
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">资产ID</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">资产名称</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">所有者</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">创建时间</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-light-2" id="assets-table-body">
                        <!-- 资产数据将在这里动态更新 -->
                        <tr>
                            <td colspan="5" class="px-6 py-10 text-center text-dark-2">
                                <div class="flex flex-col items-center">
                                    <i class="fa fa-folder-open-o text-5xl text-light-2 mb-4"></i>
                                    <p>暂无资产数据</p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="mt-4 flex justify-between items-center">
                <div class="text-sm text-dark-2">
                    显示 <span id="assets-showing">0</span> 条记录
                </div>
                <div class="flex space-x-1">
                    <button class="px-3 py-1 border border-light-2 rounded-lg text-dark-2 hover:bg-light-1 transition-colors duration-200" id="prev-page" disabled>
                        上一页
                    </button>
                    <button class="px-3 py-1 border border-primary bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors duration-200" id="current-page">
                        1
                    </button>
                    <button class="px-3 py-1 border border-light-2 rounded-lg text-dark-2 hover:bg-light-1 transition-colors duration-200" id="next-page" disabled>
                        下一页
                    </button>
                </div>
            </div>
        </section>
    </main>

    <footer class="bg-dark text-white py-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa fa-link text-primary text-2xl"></i>
                        <h2 class="text-xl font-bold">区块链资产追踪系统</h2>
                    </div>
                    <p class="text-gray-400 text-sm">
                        利用区块链技术实现资产的透明化追踪和管理，确保资产的真实性和可追溯性。
                    </p>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">快速链接</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#create" class="hover:text-primary transition-colors duration-200">资产上链</a></li>
                        <li><a href="#query" class="hover:text-primary transition-colors duration-200">资产查询</a></li>
                        <li><a href="#transfer" class="hover:text-primary transition-colors duration-200">资产转移</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">联系我们</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li class="flex items-center"><i class="fa fa-envelope-o mr-2"></i> support@blockchain.com</li>
                        <li class="flex items-center"><i class="fa fa-phone mr-2"></i> +86 123 4567 8901</li>
                        <li class="flex items-center"><i class="fa fa-map-marker mr-2"></i> 北京市海淀区中关村大街1号</li>
                    </ul>
                </div>
            </div>
            <div class="mt-8 pt-6 border-t border-gray-700 text-center text-gray-500 text-sm">
                <p>© 2025 区块链资产追踪系统 版权所有</p>
            </div>
        </div>
    </footer>

    <script>
        // 模拟区块链资产数据
        let assets = [];
        let currentPage = 1;
        const assetsPerPage = 5;
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化导航菜单
            const menuToggle = document.getElementById('menu-toggle');
            const mobileMenu = document.getElementById('mobile-menu');
            
            menuToggle.addEventListener('click', function() {
                mobileMenu.classList.toggle('hidden');
            });
            
            // 初始化表单提交事件
            document.getElementById('create-form').addEventListener('submit', createAsset);
            document.getElementById('query-form').addEventListener('submit', queryAsset);
            document.getElementById('transfer-form').addEventListener('submit', transferAsset);
            
            // 初始化搜索功能
            document.getElementById('search-asset').addEventListener('input', searchAssets);
            
            // 初始化页面导航
            document.getElementById('prev-page').addEventListener('click', prevPage);
            document.getElementById('next-page').addEventListener('click', nextPage);
            
            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    const target = document.querySelector(this.getAttribute('href'));
                    if (target) {
                        target.scrollIntoView({
                            behavior: 'smooth'
                        });
                        
                        // 关闭移动菜单
                        if (!mobileMenu.classList.contains('hidden')) {
                            mobileMenu.classList.add('hidden');
                        }
                    }
                });
            });
            
            // 模拟一些初始数据
            simulateInitialData();
            
            // 初始加载资产列表
            refreshAssets();
        });
        
        // 模拟初始数据
        function simulateInitialData() {
            // 只在没有数据时添加模拟数据
            if (assets.length === 0) {
                for (let i = 1; i <= 10; i++) {
                    assets.push({
                        id: `ASSET-${i.toString().padStart(4, '0')}`,
                        name: `资产${i}`,
                        owner: `所有者${i}`,
                        createTime: new Date().toISOString().split('T')[0]
                    });
                }
                updateStats();
            }
        }
        
        // 创建资产
        function createAsset(e) {
            e.preventDefault();
            
            const form = e.target;
            const id = form.elements['id'].value;
            const owner = form.elements['owner'].value;
            const name = form.elements['name'].value;
            const info = form.elements['info'].value;
            
            // 检查资产ID是否已存在
            const existingAsset = assets.find(asset => asset.id === id);
            if (existingAsset) {
                showResult('create', '错误', `资产ID ${id} 已存在`, 'danger');
                return;
            }
            
            // 创建新资产
            const newAsset = {
                id,
                name,
                owner,
                createTime: new Date().toISOString().split('T')[0]
            };
            
            // 添加到资产列表
            assets.push(newAsset);
            
            // 更新统计信息
            updateStats();
            
            // 显示成功消息
            showResult('create', '成功', `资产 ${id} 已成功上链`, 'success');
            
            // 重置表单
            form.reset();
            
            // 刷新资产列表
            refreshAssets();
        }
        
        // 查询资产
        function queryAsset(e) {
            e.preventDefault();
            
            const form = e.target;
            const id = form.elements['id'].value;
            
            // 查找资产
            const asset = assets.find(asset => asset.id === id);
            
            if (asset) {
                // 显示资产信息
                const content = `
                    <div class="flex flex-col space-y-3">
                        <div class="font-medium">资产ID: <span class="text-primary">${asset.id}</span></div>
                        <div class="font-medium">资产名称: ${asset.name}</div>
                        <div class="font-medium">所有者: ${asset.owner}</div>
                        <div class="font-medium">创建时间: ${asset.createTime}</div>
                    </div>
                `;
                showResult('query', '查询结果', content, 'secondary');
            } else {
                showResult('query', '错误', `未找到资产ID ${id}`, 'danger');
            }
            
            // 重置表单
            form.reset();
        }
        
        // 转移资产
        function transferAsset(e) {
            e.preventDefault();
            
            const form = e.target;
            const id = form.elements['id'].value;
            const newOwner = form.elements['owner'].value;
            
            // 查找资产
            const asset = assets.find(asset => asset.id === id);
            
            if (asset) {
                // 更新所有者
                const oldOwner = asset.owner;
                asset.owner = newOwner;
                
                // 更新统计信息
                updateStats();
                
                // 显示成功消息
                showResult('transfer', '成功', `资产 ${id} 已从 ${oldOwner} 转移至 ${newOwner}`, 'warning');
                
                // 刷新资产列表
                refreshAssets();
            } else {
                showResult('transfer', '错误', `未找到资产ID ${id}`, 'danger');
            }
            
            // 重置表单
            form.reset();
        }
        
        // 刷新资产列表
        function refreshAssets() {
            const tableBody = document.getElementById('assets-table-body');
            const startIndex = (currentPage - 1) * assetsPerPage;
            const endIndex = startIndex + assetsPerPage;
            const paginatedAssets = assets.slice(startIndex, endIndex);
            
            // 清空表格
            tableBody.innerHTML = '';
            
            if (paginatedAssets.length === 0) {
                tableBody.innerHTML = `
                    <tr>
                        <td colspan="5" class="px-6 py-10 text-center text-dark-2">
                            <div class="flex flex-col items-center">
                                <i class="fa fa-folder-open-o text-5xl text-light-2 mb-4"></i>
                                <p>暂无资产数据</p>
                            </div>
                        </td>
                    </tr>
                `;
            } else {
                // 添加资产行
                paginatedAssets.forEach(asset => {
                    const row = document.createElement('tr');
                    row.className = 'hover:bg-light-1 transition-colors duration-200 fade-in';
                    row.innerHTML = `
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-dark">${asset.id}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-dark-2">${asset.name}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-dark-2">${asset.owner}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">
                            ${asset.createTime}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <button class="text-primary hover:text-primary/80 transition-colors duration-200" onclick="fillTransferForm('${asset.id}', '${asset.owner}')">
                                转移
                            </button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            }
            
            // 更新显示的记录数
            document.getElementById('assets-showing').textContent = paginatedAssets.length;
            
            // 更新分页按钮状态
            updatePaginationButtons();
        }
        
        // 搜索资产
        function searchAssets() {
            const searchTerm = document.getElementById('search-asset').value.toLowerCase();
            
            if (!searchTerm) {
                // 如果搜索框为空，显示所有资产
                currentPage = 1;
                refreshAssets();
                return;
            }
            
            // 过滤资产
            const filteredAssets = assets.filter(asset => 
                asset.id.toLowerCase().includes(searchTerm) ||
                asset.name.toLowerCase().includes(searchTerm) ||
                asset.owner.toLowerCase().includes(searchTerm)
            );
            
            // 临时覆盖资产列表进行搜索结果显示
            const originalAssets = [...assets];
            assets = filteredAssets;
            currentPage = 1;
            refreshAssets();
            assets = originalAssets;
        }
        
        // 填充转移表单
        function fillTransferForm(assetId, currentOwner) {
            const transferForm = document.getElementById('transfer-form');
            transferForm.elements['id'].value = assetId;
            transferForm.elements['owner'].value = '';
            
            // 滚动到转移表单
            document.getElementById('transfer').scrollIntoView({
                behavior: 'smooth'
            });
            
            // 聚焦到新所有者字段
            setTimeout(() => {
                transferForm.elements['owner'].focus();
            }, 500);
        }
        
        // 上一页
        function prevPage() {
            if (currentPage > 1) {
                currentPage--;
                refreshAssets();
            }
        }
        
        // 下一页
        function nextPage() {
            if (currentPage < Math.ceil(assets.length / assetsPerPage)) {
                currentPage++;
                refreshAssets();
            }
        }
        
        // 更新分页按钮状态
        function updatePaginationButtons() {
            const prevButton = document.getElementById('prev-page');
            const nextButton = document.getElementById('next-page');
            const currentPageButton = document.getElementById('current-page');
            
            // 更新当前页码
            currentPageButton.textContent = currentPage;
            
            // 禁用/启用上一页按钮
            if (currentPage === 1) {
                prevButton.disabled = true;
                prevButton.classList.add('opacity-50', 'cursor-not-allowed');
                prevButton.classList.remove('hover:bg-light-1');
            } else {
                prevButton.disabled = false;
                prevButton.classList.remove('opacity-50', 'cursor-not-allowed');
                prevButton.classList.add('hover:bg-light-1');
            }
            
            // 禁用/启用下一页按钮
            if (currentPage >= Math.ceil(assets.length / assetsPerPage)) {
                nextButton.disabled = true;
                nextButton.classList.add('opacity-50', 'cursor-not-allowed');
                nextButton.classList.remove('hover:bg-light-1');
            } else {
                nextButton.disabled = false;
                nextButton.classList.remove('opacity-50', 'cursor-not-allowed');
                nextButton.classList.add('hover:bg-light-1');
            }
        }
        
        // 显示结果消息
        function showResult(formId, title, content, type) {
            const resultContainer = document.getElementById(`${formId}-result`);
            const resultContent = document.getElementById(`${formId}-result-content`);
            
            // 设置结果标题和内容
            resultContent.innerHTML = `
                <div class="font-medium text-lg mb-2">${title}</div>
                <div>${content}</div>
            `;
            
            // 设置结果样式
            resultContent.className = `p-4 rounded-lg border-${type} bg-${type}/5 text-${type}`;
            
            // 显示结果
            resultContainer.classList.remove('hidden');
            resultContainer.classList.add('fade-in');
            
            // 滚动到结果
            resultContainer.scrollIntoView({
                behavior: 'smooth',
                block: 'nearest'
            });
            
            // 3秒后自动隐藏结果
            setTimeout(() => {
                resultContainer.classList.add('hidden');
            }, 5000);
        }
        
        // 更新统计信息
        function updateStats() {
            // 更新总资产数
            document.getElementById('total-assets').textContent = assets.length;
            
            // 更新活跃所有者数
            const owners = new Set(assets.map(asset => asset.owner));
            document.getElementById('active-owners').textContent = owners.size;
            
            // 模拟本月转移数
            document.getElementById('monthly-transfers').textContent = Math.floor(assets.length * 0.3);
        }
    </script>
</body>
</html>
    